import React from 'react';
import useAppProductEventData from '../../hook/useAppProductEventData';
import {Row, Col} from 'antd';
import FormItem from '../FormItem';
function AppProductEventForm(props) {
  const {
    app_id = undefined,
    product_id = undefined,
    event_id = undefined,
    layout,
    disabled,
    form,
    hideLabel,
    isAddAll,
    app_placeholder,
    product_placeholder,
    event_placeholder,
    onAppChange = () => {},
    onProductChange = () => {},
    onEventChange = () => {},
  } = props;
  const { items } = useAppProductEventData({
     ...props,
     app_id: (isAddAll && !app_id) ? -1 : app_id,
     product_id,
     event_id,
     layout,
     disabled,
     form,
     hideLabel,
     isAddAll,
     app_placeholder,
     product_placeholder,
     event_placeholder,
     onAppChange,
     onProductChange,
     onEventChange,
  });

  const formItems = [...items];

  return (
    <Row type='flex' gutter={20}>
      {formItems.map((item) => {
        return (
          <Col key={item.name} span={8}>
            <FormItem form={form} item={item} colNum={1} />
          </Col>
        );
      })}
    </Row>
  );
};
export default AppProductEventForm;